<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQuery</title>
<style type="text/css">
* {
	margin: 0px;
	padding: 0px;
}

.red {
	color: red;
}

.blue{
        color: blue;
    }

.bigger {
	font-size: 50px;
	font-family: bolder;
}

.cls1 {
	font-family: bolder;
}

.cls2 {
	display: none;
}

* {
	margin: 0px;
	padding: 0px;
}

li {
	list-style: none; /* 清除li的点 */
}

#leftsidebar_box {
	width: 160px;
}

.menu {
	background-color: rgb(10, 161, 237);
	height: 36px;
	width: 120px;
	color: #f5f5f5;
	font-size: 14px;
	font-weight: bold;
	font-family: "黑体";
	line-height: 36px;
	background-repeat: no-repeat;
	padding-left: 40px;
	background-position: 10px center; /* 垂直居中 */
	cursor: pointer; /* 鼠标悬停的时候变成小手 */
	margin-bottom: 10px;
}

.cmenu1 {
	background-image: url(../images/myOrder/myOrder.png);
}

.cmenu2 {
	background-image: url(../images/myOrder/pcenter_icon1.png);
}

.cmenu3 {
	background-image: url(../images/myOrder/pcenter_icon2.png);
}

.cmenu4 {
	background-image: url(../images/myOrder/pcenter_icon3.png);
}

.submenu {
	background-color: #fff;
	padding-left: 40px;
	padding-bottom: 15px;
}

.submenu>li {
	color: #808080;
	line-height: 40px;
	font-size: 12px;
}

.menu>img {
	float: right;
	margin-top: 12px;
	margin-right: 5px;
}

.dis {
	display: block;
}

.hide {
	display: none;
}

#div2{
	width:500px;
	height:500px;
	background:blue;
	opcity:.3;//透明度
}
img{
	position:relative;
}
#mpdiv{
	width: 200px;
	height: 200px;
	background: #f00;
}
#mpdiv p{
	width: 100px;
	height: 100px;
	background: #00f;
}
.big{
	width:500px;
}
.small{
	width:256px;
}
#mndiv{
	height:300px;
	width:300px;
	background:#069;
	opacity:.5;
	color:red;
	text-align:center;
	line-height:300px;
	font-size:18px;
}
#mndiv input{
float:right;
margin:5px;
}
</style>
<script type="text/javascript" src="../jquery-3.1.1.min.js"></script>
<script type="text/javascript">
	function fun1() {
		var oP2 = document.getElementsByTagName("p")[1];
		console.log("DOM对象:");
		console.log(oP2);
		console.log("JQuery对象：");
		console.log($(oP2));/*包装进去的dom对象不需要在外面加“”*/
		console.log($(oP2)[0]);/*里面只包装了p2一个Dom对象*/

		var size = $(oP2).css("font-size").replace("px", "");
		$(oP2).css("font-size", (--size) + "px");
	}
	function fun2() {
		var oP2 = document.getElementsByTagName("p")[1];
		var size = $(oP2).css("font-size").replace("px", "");
		$(oP2).css("font-size", (++size) + "px");
	}

	function fun3() {
		console.log($("div p:eq(0)").html());
		console.log($("div p:eq(1)").text());
		$("img").attr("src", "../img/20.png");

		var str = $("div p:eq(1)").html();
		var reg = /b/g;
		str = str.replace(reg, "u");
		$("div p:eq(1)").html(str);
		$("div div input").val("已修改完成！");
	}

	$(function() {
		//JQ选择器
		//1.基本选择器即CSS选择器直接用,选择器需要$(“”)
		console.log($("#gz"));
		console.log($(".sz"));
		console.log($("div li"));
		//2.层次选择器
		console.log($("#gz+"));//得下一个弟弟
		console.log($("#gz~"));//得所有弟弟
		//3.过滤器：（：）
		//基本过滤器：
		console.log($("li:first"));
		console.log($("li:eq(3)"));
		console.log($("li:lt(2)"));
		console.log($("li:not(#gz)"));
		//内容过滤器：
		console.log($("li:contains('州')"));
		console.log($("li:empty"));
		//属性过滤器：
		console.log($("li[style]"));
		console.log($("a[href != '#']"));/*带href属性且值不是#*/
		//可见性过滤器：
		console.log($("li:hidden"));
		//状态过滤器;
		console.log($("input:checked"));
		//4.表单选择器：input 9种直接用
		console.log($(":radio"));

		setInterval(function() {
			$("#cs").toggleClass("bigger").toggleClass("red");
		}, 1000);

		$("#nav>li").click(
				function() {
					$(this).next().css("display", "block").siblings(".cls2")
							.css("display", "none");
				});

		$("#sc>li").next().css("display", "block").siblings(".menu2").css(
				"display", "none");
		
		
		$(".menu").click(function(){
			if($(this).next().css("display")=="block"){
				//把所有的ul都关闭
				//所有的箭头都向右
				$(".submenu").removeClass("dis")
				.addClass("hide");
				$(".menu").children("img")
				.attr("src","../images/myOrder/myOrder1.png");
			}else{
				//关闭所有ul,把箭头向右
				$(".submenu").removeClass("dis")
				.addClass("hide");
				$(".menu").children("img")
				.attr("src","../images/myOrder/myOrder1.png");
				//打开弟弟ul,把箭头向下
				$(this).next().removeClass("hide")
				.addClass("dis");
				$(this).children("img")
				.attr("src","../images/myOrder/myOrder2.png");
			}
		});
		
		$("#ddb>img").hover(function(){
			$(this)
			.animate({"left":"1000px"},500).animate({"top":"1000px"},500).animate({"left":"0px"},500).animate({"left":"500px"},400).animate({"left":"0px"},400).animate({"left":"400px"},300).animate({"left":"0px"},300).animate({"left":"300px"},200)
			.animate({"left":"0px"},200).animate({"left":"200px"},100).animate({"left":"0px"},500).animate({"left":"100px"},100).animate({"top":"0px"},500)
			.animate({"left":"1000px"},500).animate({"top":"500px"},500).animate({"left":"0px"},500).animate({"left":"500px"},400).animate({"left":"0px"},400).animate({"left":"400px"},300).animate({"left":"0px"},300).animate({"left":"300px"},200)
			.animate({"left":"0px"},200).animate({"left":"200px"},100).animate({"left":"0px"},500).animate({"left":"100px"},100).animate({"top":"0px"},500)
			.animate({"left":"1000px"},500).animate({"top":"400px"},500).animate({"left":"0px"},500).animate({"left":"500px"},400).animate({"left":"0px"},400).animate({"left":"400px"},300).animate({"left":"0px"},300).animate({"left":"300px"},200)
			.animate({"left":"0px"},200).animate({"left":"200px"},100).animate({"left":"0px"},500).animate({"left":"100px"},100).animate({"top":"0px"},500)
			.animate({"left":"1000px"},500).animate({"top":"300px"},500).animate({"left":"0px"},500).animate({"left":"500px"},400).animate({"left":"0px"},400).animate({"left":"400px"},300).animate({"left":"0px"},300).animate({"left":"300px"},200)
			.animate({"left":"0px"},200).animate({"left":"1000px"},100).animate({"left":"0px"},500).animate({"left":"100px"},100).animate({"top":"0px"},500)
			.animate({"left":"1000px"},500).animate({"top":"200px"},500).animate({"left":"0px"},500).animate({"left":"500px"},400).animate({"left":"0px"},400).animate({"left":"400px"},300).animate({"left":"0px"},300).animate({"left":"300px"},200)
			.animate({"left":"0px"},200).animate({"left":"200px"},100).animate({"left":"0px"},500).animate({"left":"100px"},100).animate({"top":"0px"},500)
			.animate({"left":"1000px"},500).animate({"top":"100px"},500).animate({"left":"0px"},500).animate({"left":"500px"},400).animate({"left":"0px"},400).animate({"left":"400px"},300).animate({"left":"0px"},300).animate({"left":"300px"},200)
			.animate({"left":"0px"},200).animate({"left":"200px"},100).animate({"left":"0px"},500).animate({"left":"100px"},100).animate({"top":"0px"},500)
		},function(){
			$(this).animate({"left":"0px"},500).animate({"top":"0px"},500).fadeOut(3000);
		})
		
		$("#mpdiv input").click(function(){
			console.log("冒泡");
			alert("button");
		});
		$("#mpdiv>p").click(function(){
			alert("p");
			return false;//结束冒泡
		});
		$("#mpdiv").click(function(){
			alert("div");
		});
		
		$("#img1").hover(function(){
			$("#img1").addClass("big").attr("src","../img/04.png");
		},function(){
			$("#img1").removeClass("big").attr("src","../img/16.png");
		});	
		
		setInterval(function(){$("#img2").toggle(100)},200);
		
		$("#mndiv input").click(function(){
			$("#mndiv").slideUp(1000);
		});
		setTimeout(function(){
			$("#mndiv input").trigger("click");		
		},3000);
		
	});
	function show(){
		$("img:eq(0)").show(1500,function(){
			console.log("显示完成！");//自带新线程，1.5s后才打印
		});
		console.log("显示方法中的打印语句");
	}
	function hide(){
		$("img:eq(0)").hide(1500,function(){
			console.log("隐藏完成！");
		});
	}
	function down(){
		$("img:eq(1)").slideDown(2000);
	}
	function up(){
		$("img:eq(1)").slideUp(2000);
	}
	function downdiv(){
		$("#div2").slideDown(2000);
	}
	function updiv(){
		$("#div2").slideUp(2000);
	}
	function hint(){
		$("img:eq(2)").fadeOut(2000).fadeIn(2000);
	}
	function movie(){
		$("#div2").fadeOut(2000).show(2000).slideUp(2000).fadeIn(2000).hide(2000).slideDown(2000);
	}
	function diy(){//相对原来位置定位的距离
		$("#diy>img").animate({"left":"1000px"},2000).animate({"top":"1000px"},2000).animate({"left":"0px"},2000).animate({"top":"0px"},2000);
		diy();/*迭代调用*/
	}
	function fun4() {
		console.log($("div ul"));
		console.log($("div ul:eq(0)"));

		/* 	$("div ul:eq(0)").append($("<li>重庆<li>"));
		$("div ul:eq(0)").prepend($("<li>杭州<li>"));  */

		$("div ul").append($("<li>重庆</li>"));
		$("div ul").prepend($("<li>杭州</li>"));
	}
	function fun5() {
		$("#gz").before($("<li>南京</li>"));
		$("#gz").after($("<li>南宁</li>"));
	}
	function fun6() {
		$("#gz").remove();
		$("div ul li").remove("li:contains('南')");
	}

	var zzs = [ [], [ "剑魂", "狂战", "瞎子", "鬼泣" ], [ "元素", "战法", "魔道", "召唤" ],
			[ "爆破", "冰结", "血法", "风法", "0.0" ], [ "剑魔", "剑宗", "流浪", "暗帝" ],
			[ "漫游", "大枪", "弹药", "1.1" ] ];
	function fun7() {
		var value = $("#zy").val();

		$("#zz").html("--<option>请选择</option>--");
		for (var i = 0; i < zzs[value].length; i++) {
			str = "<option>" + zzs[value][i] + "</option>";
			$("#zz").append(str);
		}

	}
	
	$(function(){
        $("#dd4 input:eq(0)").click(function(){
            //alert($("div:first").text());
            $("#dd4 div:first").text("xxx");
        });
        $("#dd4 input:eq(1)").click(function(){
            $("#dd4 div:first").html("<h1>abc</h1>");
        });
        $("#dd4 input:eq(2)").click(function(){
            //设置单个样式
             //$("div:first").css("color","red");
            //设置多个样式 
             $("#dd4 div:first")
                .css({"background-color":"yellow",
                 "width":"200px","height":"200px"});
        });
        $("#dd4 input:eq(3)").click(function(){
            //获取 
            // alert($("div:last").attr("class"));
            //给class属性赋值
            $("#dd4 div:last").attr("class","blue");
        });
    });
	
	 $(function(){
	        //给所有多选框添加事件
	        $("#cart input").click(function(){
	            //判断出多选
	            if(this.id=="c5"){
	                //让其他的几个多选状态和c5状态一样
	                $(this).siblings("input")
	                        .attr("checked",this.checked);
	            }
	            //统计总价
	            var total = 0;
	            //得到四个多选框
	            $("#cart input:not(#c5)").each(function(){
	                //判断选中
	                if(this.checked){
	                    total+=parseInt(this.value);
	                }
	            });
	            //显示到p
	            $("#cart p").text("总价:"+total+"元");
	            
	        });
	     });
</script>
</head>
<body>
	<h1>JavaScript框架--JQuery</h1>
	<h2>JQuery对象实质上是Dom对象的数组</h2>
	<input type="button" value="-" onclick="fun1();">
	<input type="button" value="+" onclick="fun2();">
	<p>注意看网页控制台：</p>
	<p>点button改变P2的字体大小</p>
	<p>dom对象只能调用dom方法，JQuery对象只能调用JQuery方法,但DOM对象和JQuery对象可以相互转化</p>


	<h2>一、JQuery常用选择器</h2>
	<div>
		<ul>
			<li>北京</li>
			<li style="display: none">澳门</li>
			<li>上海</li>
			<li id="gz">广州</li>
			<li class="sz">深圳</li>
			<li></li>
			<li>成都</li>
			<li>贵州</li>
		</ul>
		<input type="text" disabled="disabled">
		<!--不可用状态-->
		<input type="text" readonly="readonly"><br> <input
			type="radio" name="gender" checked="checked">男 <input
			type="radio" name="gender">女 <a href="www.baidu.com">a标签</a>
	</div>

	<h2>二、JQuery对DOM的操作</h2>
	<h3>1.读写内容和值</h3>
	<div>
		<p>
			JQuery支持<b>读写</b>节点
		</p>
		<p>
			JQuery支持<b>增删</b>节点
		</p>
		<img src="../img/12.png">
		<div>
			<input type="button" value="改写内容属性和值" onclick="fun3()">
		</div>
	</div>
	<h3>2.增删节点</h3>
	<input type="button" value="头尾追加" onclick="fun4()">
	<input type="button" value="插入" onclick="fun5()">
	<input type="button" value="删除" onclick="fun6()">
	<h3>3.修改样式:add remove has class toggle</h3>
	<p id="cs">JQuery对样式提供了很友好的操作</p>
	<h3>4.dom操作</h3>
	<div id="dd4">
		<input type="button" value="文本按钮"> <input type="button"
			value="html按钮"> <input type="button" value="样式按钮"> <input
			type="button" value="属性按钮">
		<div>div1</div>
		<div>div2</div>
		<div class="red">div3</div>
	</div>
	<h3>*小案例：</h3>
	<h4>(1)JQuery 二级联动</h4>
	<div id="div">
		<label>选择职业：</label>
		<div>
			<label>职业：</label> <select id="zy" onchange="fun7();" name="dzy">
				<option value="0" selected="selected">--请选择--</option>
				<option value="1">鬼剑士</option>
				<option value="2">女魔法师</option>
				<option value="3">男法师</option>
				<option value="4">女鬼剑</option>
				<option value="5">男枪手</option>
			</select>
		</div>
		<div>
			<label>转职：</label> <select id="zz" name="zzy">
				<option value="" selected="selected">--请选择--</option>
			</select>
		</div>
	</div>

	<h4>（2）简易的二级菜单</h4>
	<div>
		<ul class="cls1" id="nav">
			<li>一级菜单1</li>
			<ul class="cls2">
				<li><a href="#">二级菜单A</a></li>
				<li><a href="#">二级菜单B</a></li>
				<li><a href="#">二级菜单C</a></li>
				<li><a href="#">二级菜单D</a></li>
				<li><a href="#">二级菜单E</a></li>
			</ul>

			<li>一级菜单2</li>
			<ul class="cls2"></ul>

			<li>一级菜单3</li>
			<ul class="cls2">
				<li><a href="#">二级菜单F</a></li>
				<li><a href="#">二级菜单G</a></li>
				<li><a href="#">二级菜单H</a></li>
			</ul>

			<li>一级菜单4</li>
			<ul class="cls2">
				<li><a href="#">二级菜单I</a></li>
				<li><a href="#">二级菜单J</a></li>
				<li><a href="#">二级菜单K</a></li>
				<li><a href="#">二级菜单L</a></li>
			</ul>

			<li>一级菜单5</li>
			<ul class="cls2">
				<li><a href="#">二级菜单M</a></li>
				<li><a href="#">二级菜单N</a></li>
			</ul>
		</ul>
	</div>
	<h4>（3）学子商城二级菜单</h4>
	<div id="leftsidebar_box">
		<ul>
			<li class="menu cmenu1">我的订单 <img
				src="../images/myOrder/myOrder1.png">
			</li>
			<!-- 与li同级的ul是二级菜单 -->
			<ul class="submenu hide">
				<li>全部订单</li>
				<li>待付款</li>
				<li>待收货</li>
				<li>待评价</li>
				<li>退货退款</li>
			</ul>
			<li class="menu cmenu2">我的优惠劵 <img
				src="../images/myOrder/myOrder1.png">
			</li>
			<!-- 与li同级的ul是二级菜单 -->
			<ul class="submenu hide">
				<li>我的优惠劵</li>
			</ul>
			<li class="menu cmenu3">收货地址 <img
				src="../images/myOrder/myOrder1.png">
			</li>
			<ul class="submenu hide">
				<li>地址管理</li>
			</ul>
			<li class="menu cmenu4">账号管理 <img
				src="../images/myOrder/myOrder1.png">
			</li>
			<ul class="submenu hide">
				<li>我的信息</li>
				<li>安全管理</li>
			</ul>
		</ul>
	</div>
	
	<h4>（4）购物车</h4>
	<div id="cart">
	<input type="checkbox" id="c1" value="20"> 
<label for="c1">鼠标20元</label><br>
<input type="checkbox" id="c2" value="80">
<label for="c2">键盘80元</label><br>
<input type="checkbox" id="c3" value="5000">
<label for="c3">华为手机5000元</label><br>
<input type="checkbox" id="c4" value="2000">
<label for="c4">苹果手机2000元</label><br>
<input type="checkbox" id="c5">
<label for="c5">全选</label><br>
<p>总价:0元</p> 
	</div>

	<h2>三、JQuery对事件的操作</h2>
	<h3>1.事件冒泡</h3>
	<div id="mpdiv">
		<p><input type="button" value="冒泡"></p>
	</div>
	<h3>2.合成事件</h3>
	<div>
	<img alt="" src="../img/16.png" id="img1">
	<img alt="" src="../img/16.png" id="img2">
	</div>
	<h3>3.模拟事件</h3>
	<div id="mndiv">
	<input type="button" value="x">
	3s内点X关闭，3s时模拟点击x关闭
	</div>
	<h2>四、JQuery动画基础</h2>
	<div>
	<input type="button" value="显示1" onclick="show();">
	<input type="button" value="隐藏1" onclick="hide();">
	<input type="button" value="打开2" onclick="down();">
	<input type="button" value="收起2" onclick="up();">
	<input type="button" value="打开div" onclick="downdiv();">
	<input type="button" value="收起div" onclick="updiv();">
	<input type="button" value="消失后有显示3" onclick="hint();">
	<input type="button" value="div变化4" onclick="movie();">
	<input type="button" value="动起来！" onclick="diy();">
	</div>
	
	<div id="diy">
		<image src="../img/10.png">
		<image src="../img/11.png">
		<image src="../img/12.png">
		<image src="../img/13.png">
	</div>
	<div  id="div2"></div>
	<h3>疯狂的呆呆兵</h3>
	<div id="ddb">
		<img src="../img/14.png">
		<img src="../img/15.png">
		<img src="../img/16.png">
		<img src="../img/17.png">
		<img src="../img/18.png">
		<img src="../img/19.png">
		<img src="../img/20.png">
		<img src="../img/21.png">
		<img src="../img/22.png">
	</div>
</body>
</html>